<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>设置</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../plugins/mui/mui.min.css">
		<script src="../../js/statistics.js"></script>
		<style type="text/css">
			 *{
            box-sizing: border-box;
            font-family: 'Microsoft YaHei';
	        }
	        body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form,  input, p, table, th, td ,select,option{
	            padding: 0;
	            margin: 0;
	            list-style: none;
	        }
	        body{
	        	padding-top:45px;
	        	padding-bottom:10px;
	        }
			/*title的样式覆盖*/
			.mui-bar{
				background-color:#43ac45;
				top:0;
			}
			.mui-bar>a{
				color:#fff;
			}
			.mui-title{
				color:#fff;
			}
			/*列表数字角标移动防止盖住右箭头*/
			.mui-table-view:before{
				display:none;
			}
			.mui-table-view:after{
				display:none;
			}
			.mui-table-view-cell:after{
				background-color:#e5e5e5;
			}
			
			/*百分比优化*/
			.mui-table-view-cell {
				padding: 11px 4%;
			}
			.mui-table-view-cell>a:not(.mui-btn){
				margin: -11px -4%;
			}
			.mui-navigate-right:after, .mui-push-right:after {
				right: 4%;
				
			}
			.mui-switch .mui-switch-mini{
				right:4%;
			}
			/*开关 off on替换 开关*/
			/*.mui-switch.mui-active:before{
				content:'开';
			}
			.mui-switch:before{
				content:'关';
			}*/
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">设置</h1>
		</header>
		
		<ul class="mui-table-view" style='margin-top:10px;'>
				<li class="mui-table-view-cell">
					<span>铃声</span>
					<!--mui-active 代表开-->
					<div class="mui-switch mui-switch-mini "id='mySwitch'>
						<div class="mui-switch-handle" ></div>
					</div>
				</li>
				<li class="mui-table-view-cell">
					<span>震动</span>
					<div class="mui-switch mui-switch-mini " id='mySwitch1'>
						<div class="mui-switch-handle" ></div>
					</div>
				</li>
		</ul>
		<script src="../../plugins/jquery/jquery-3.1.0.min.js"></script>
		<script src="../../plugins/mui/mui.min.js"></script>
		<!--<script type="text/javascript" src="../plugins/mui/update.js"></script>-->
		<script type="text/javascript">
			mui.init({
// 				statusBarBackground: '#43ac45',//ios下设置顶部背景色
	  		});
	  		mui.plusReady(function() {
				  //关闭等待框
				plus.nativeUI.closeWaiting();
				    //显示当前页面
				mui.currentWebview.show('slide-in-right',200);
				
				//判断铃声跟震动情况
				function change(){
					if(plus.storage.getItem('tinkle')=='on'){
						$('#mySwitch').addClass('mui-active');
					}
					if(plus.storage.getItem('shake')=='on'){
						$('#mySwitch1').addClass('mui-active');
					}
				}
				//初始更新当前页面的开关状态
				change();
				//监听铃声开关
				document.getElementById("mySwitch").addEventListener("toggle",function(event){
				  if(event.detail.isActive){
				  		plus.storage.setItem('tinkle', 'on');
//				    console.log("你启动了铃声");
				  }else{
				  		plus.storage.setItem('tinkle', 'off');
//				    console.log("你关闭了铃声");  
				  }
				})
				//监听震动开关
				document.getElementById("mySwitch1").addEventListener("toggle",function(event){
				  if(event.detail.isActive){
				  		plus.storage.setItem('shake', 'on');
//				    console.log("你启动了震动");
				  }else{
				  		plus.storage.setItem('shake', 'off');
//				    console.log("你关闭了震动");  
				  }
				})
				
			});
	  		
			
		</script>
	</body>
</html>

